<template>
	<div class="addTeacher w944">
		<alert ref="alert"></alert>
		<div class="label_top">
			<button @click="cancel"><i><&nbsp;</i>返回</button>
			<p>{{updateTitle}}</p>
		</div>
		<div class="addCont">
			<labelAll ref="labelAll" :LabelsIds="LabelsIds" :LabelsNames="LabelsNames" v-on:labelNamesChanges="reveiceChange($event)"></labelAll>
			<div class="add_line">
				<span class="tit">讲师类型：</span>
				<el-radio-group v-model="type" v-if="this.nowType=='add'">
					<el-radio :label="1" name="Type">内部讲师</el-radio>
					<el-radio :label="2" name="Type">外部讲师</el-radio>
				</el-radio-group>
				<span v-if="this.nowType=='edit'" class="el-radio">{{lectureType}}</span>
			</div>
			<div class="add_line" v-if="this.type==1">
				<span class="tit">内部员工：</span>
				<el-input placeholder="请选择内部员工" v-model="userName" :readonly="this.nowType=='edit'?true:false" class="chooseInput"></el-input>
				<a @click="chooseEmployee" v-if="this.nowType=='add'">选择员工</a>
				<em class="warn"><i>*</i>必选项</em> 
			</div>
			<div class="add_line" v-if="this.type==2">
				<span class="tit">讲师名字：</span>
				<el-input placeholder="请输入讲师名字" v-model="userName"></el-input>
				<em class="warn"><i>*</i>必选项</em> 
			</div>
			<div class="add_line">
				<span class="tit">手机号：</span>
				<el-input placeholder="请输入手机号" v-model="phone" :readonly="this.type == 1?true:false" maxLength="11"></el-input>
				<em class="warn"><i>*</i>必选项</em> 
			</div>
			<div class="add_line" style="height: 116px;">
				<span class="tit">讲师头像：</span>
				<div class="uploadHeadImg">
					<el-upload class="avatar-uploader" refs="uploadxls" action="http://www.h3clearning.com/huathree-back/uploadFile" :headers="myHeaders" :show-file-list="false" :before-upload="beforeAvatarUpload" :on-success="handleAvatarSuccess">
					  <img v-if="imageUrl" :src="imageUrl" class="avatar">
					  <i v-else class="el-icon-plus avatar-uploader-icon"><b style="display:block;font-weight:normal"><em>上传图片</em></b></i>
					</el-upload>
					<em>建议尺寸为200*200像素，大小小于1M</em>
				</div>
			</div>
			<div class="add_line">
				<span class="tit">性别：</span>
				<el-select v-model="sex" placeholder="选择性别" :disabled="this.type == 1?true:false">
					<el-option v-for="item in sexArr" :key="item.id" :label="item.name" :value="item.id"></el-option>
				</el-select>
			</div>
			<div class="add_line">
				<span class="tit">地区：</span>
				<el-cascader v-model="city" :options="cityArr" :props="optionProps" @change="cityArrChange" placeholder="选择地区" :disabled="this.type == 1?true:false"></el-cascader>
			</div>
			<div class="add_line" v-if="teacherIsOpen==1">
				<span class="tit">讲师等级：</span>
				<el-select v-model="gradeRuleId" placeholder="选择等级">
					<el-option label="选择等级" value=""></el-option>
					<el-option v-for="item in gradeRuleIdArr" :key="item.id" :label="item.name" :value="item.id"></el-option>
				</el-select>
			</div>
			<div class="add_line">
				<div style="overflow: hidden;">
					<span class="tit">讲师标签：</span>
					<div class="labelFour"><span v-for="item in this.LabelsNames">{{item}}</span></div>
					<a @click="openLabel" class="openLabel">选择标签</a>
				</div>
				<p class="labelWarn">讲师擅长标签，最多可选四个</p>
			</div>
			<div class="teacherJieshao">
				<span style="margin-bottom: 25px;display: block;">讲师介绍：</span>
				<vue-ueditor-wrap v-model="msg" :config="myConfig" style="margin-left: 82px;"></vue-ueditor-wrap>
			</div>
			<div class="footerButton">
				<a @click="checkSave" v-if="this.nowType!='seen'" v-bind:style="{background: clickLock==true ? '#44CEF6' : '#3a8ee6'}">保存</a>
				<a @click="cancel" class="cancel">取消</a>
			</div>
		</div>
		<div class="innerLecture" v-if="innerLecture">
			<a @click="innerLectureClose" class="innerLectureClose">&#10005;</a>
			<p>选择员工</p>
			<div class="innerLectureLine">
				<el-cascader v-model="city" :options="cityArr" :props="optionProps" class="th_2" @change="cityArrChange" placeholder="选择地区"></el-cascader>
				<div class="msearch">
					<input placeholder="请输入关键词……" v-model="search"/>
					<a @click="getInnerLecture"><img src="../../assets/qudaoImg/search.png"/></a>
				</div>
			</div>
			<div class="userContent clearFix">
				<div class="leftContent">
					<el-input placeholder="查找组织机构、部门" v-model="filterText"></el-input>
					<el-tree :data="organizationArr" :props="defaultProps" @node-click="handleNodeClick" :filter-node-method="filterNode" ref="tree" :default-expanded-keys="[dataId]" node-key="id"></el-tree>
				</div>
				<div class="rightContent">
					<el-table :data="tableData" border @selection-change="handleSelectionChange">
						<el-table-column type="selection"></el-table-column>
						<el-table-column prop="nickname" label="姓名" width="100"></el-table-column>
						<el-table-column prop="organizationResultName" label="组织"></el-table-column>
						<el-table-column prop="stationName" label="岗位" width="150"></el-table-column>
					</el-table>
					<div class="studyPag">
						<el-pagination @current-change="handleCurrentChange" :current-page= "currentpage" :page-size="pagesize" layout="prev, pager, next" :total="total"></el-pagination>
					</div>
				</div>
			</div>
			<div class="footerButton">
				<a @click="innerLectureSubmit">确定</a>
				<a @click="innerLectureClose" class="cancel">取消</a>
			</div>
		</div>
	</div>
</template>
<script>
	import labelAll from '../../components/label.vue';
	import alert from '../../components/Alert.vue';
	export default {
		data() {
			return {
				LabelsIds:'',
				LabelsNames:'',
				labelType:'teacher',
				teacherIsOpen:'',
				nowType: 'add',
				updateTitle:'新增讲师',
				clickLock:true,
				id:'',
				type:1,
				lectureType:'',
				userid:'',
				userName:'',
				phone:'',
				imageUrl: '',
				sex: '',
				sexArr:[{
					id:0,
					name:'女'
				},{
					id:1,
					name:'男'
				}],
				city:[],
				cityArr:[],
				proviceid:'',
				cityid:'',
				regionid:'',
				optionProps: {
					value: 'id',
					label: 'name',
					children: 'list'
				},
				gradeRuleId:'',
				gradeRuleIdArr:[],
				skills: '',
				selectedItem: [],
				selectedId: [],
				subjects: [],
				msg:'',
				myConfig: {
					autoHeightEnabled: false,
					initialFrameHeight: 420,
					initialFrameWidth: '840',
				},
				//以下为弹窗
				innerLecture:false,
				search:'',
				tableData:[],
				dataId:'',
				filterText: '',
				organizationArr:[],
				defaultProps: {
          			children: 'childrenList',
          			label: 'name'
        		},
				multipleSelection: [],
				multipleSelectionName: [],
				multipleSelectionPhone: [],
				multipleSelectionImageUrl: [],
				multipleSelectionSex: [],
				multipleSelectionCity: [],
				pagesize: 15,
		        currentpage: 1,
		        total: 1,
				myHeaders:{Authorization:this.$root.userInfoMsg.sessionId}
			}
		},
		methods: {
			getParams() {
				var routerParams = this.$route.params.type;
				if(routerParams == 'edit') {
					this.nowType = 'edit';
					this.updateTitle = "编辑讲师";
				} else {
					this.nowType = 'add';
				}
			},
			cityArrChange(data){
//				console.log('data:',data,this.city);
				this.proviceid = data[0];
				if(data[1]!=undefined){
					this.cityid = data[1];
				}else{
					this.cityid = '';
				};
				if(data[2]!=undefined){
					this.regionid = data[2];
				}else{
					this.regionid = '';
				};
			},
 			getTreeDataCity(data){
				for(var i=0;i<data.length;i++){
					if(data[i].list.length<1){
						data[i].list=undefined;
					}else {
						this.getTreeDataCity(data[i].list);
					}
				}
				return data;
        	},
			chooseEmployee(){
				this.innerLecture = true;
			},
			getOrganizationArr(){
				this.$ajax({
					url: this.$root.jifuUrl + "/getOrganizationInfo?"+'&rootcompanyid='+1+'&proviceid='+this.proviceid+'&cityid='+this.cityid+'&regionid='+this.regionid,
					method: 'GET',
					data: {},
					success: res => {
						if(res.data.code == 200) {
							this.organizationArr = res.data.data;
						}
					}
				});
			},
			filterNode(value, data) {
        		if (!value) return true;
       	 		return data.name.indexOf(value) !== -1;
      		},
      		handleNodeClick(data){
        		this.dataId = data.id;
        		this.getInnerLecture();
			},
			getInnerLecture(){
				this.$ajax({
					url: this.$root.jifuUrl + "/getUserByOrganizationId?"+'page='+this.currentpage+'&num='+this.pagesize+'&rootcompanyid='+1+'&name='+this.search+'&organizationId='+this.dataId+'&proviceid='+this.proviceid+'&cityid='+this.cityid+'&regionid='+this.regionid,
					method: 'GET',
					data: {},
					success: res => {
						if(res.data.code == 200) {
							this.tableData = res.data.data.list;
							this.total=res.data.data.pageParam.items;
						}
					}
				})
			},
			handleSelectionChange(val) {
				for(var i = 0;i<val.length;i++){
					this.multipleSelection.push(val[i].id);
					this.multipleSelectionName.push(val[i].nickname);
					this.multipleSelectionPhone.push(val[i].phone);
					this.multipleSelectionImageUrl.push(val[i].headimg);
					this.multipleSelectionSex.push(val[i].sex);
					this.proviceid = val[i].proviceid;
					this.cityid = val[i].cityid;
					this.regionid = val[i].regionid;
					if(val[i].proviceid!=undefined){
						this.multipleSelectionCity.push(val[i].proviceid);
					};
					if(val[i].cityid!=undefined){
						this.multipleSelectionCity.push(val[i].cityid);
					};
					if(val[i].regionid!=undefined){
						this.multipleSelectionCity.push(val[i].regionid);
					};
				}
			},
			handleCurrentChange(value) {
				this.currentpage = value;
				this.getInnerLecture();
			},
			innerLectureSubmit(){
				console.log(this.multipleSelection.length);
				if(this.multipleSelection.length>1){
					alert('只能添加一位讲师！');
				}else{
					this.userid = this.multipleSelection.join(',');
					this.userName = this.multipleSelectionName.join(',');
					this.phone = this.multipleSelectionPhone.join(',');
					this.imageUrl = this.multipleSelectionImageUrl.join(',');
					if(this.multipleSelectionSex.join(',')==0){
						this.sex=0;
					}else{
						this.sex=1;
					};
					this.city = this.multipleSelectionCity;
					this.innerLecture = false;
				}
			},
			innerLectureClose(){
				this.innerLecture = false;
			},
			
			openLabel(){
				this.$refs.labelAll.labelTable=true;
			},
			reveiceChange(event){
				this.LabelsIds = event.arg1;
	        	this.LabelsNames = event.arg2;
	     	},
	     	
			newAdd() {
				if(this.LabelsIds!=''){
					this.labels = this.LabelsIds.join(",")
				}else{
					this.labels = ''
				};
				let newDetail = {
					type:this.type,
					phone:this.phone,
					headimg: this.imageUrl,
					sex: this.sex,
					proviceid:this.proviceid,
					cityid:this.cityid,
					regionid:this.regionid,
					gradeRuleId:this.gradeRuleId,
					labels:this.labels,
					content:this.msg
				};
				if(this.type==1){
					newDetail.userid = this.userid
				};
				if(this.type==2){
					newDetail.nickname = this.userName;
					newDetail.rootcompanyid = 1
				};
				if(this.type==1){
					if(this.clickLock==true){
						this.clickLock = false;
						this.$ajax({
							url: this.$root.jifuUrl + "/addLecturerNew",
							data: this.qs.stringify(newDetail),
							method: 'POST',
							success: res => {
								if (res.data.code == 200) {
									this.$refs.alert.show({alertText: '保存成功',alertSubmit: function(){alertStatus: 0}});
									setTimeout(() =>{
										this.$router.push({
											name:'teacher'
										});
									},2000)
								}else{
									this.clickLock = true;
									this.failText = res.data.message;
									this.$rootFunction().deleteResFail();	
								}
							}
						});
					}
				}else if(this.type==2){
					if(this.clickLock==true){
						this.clickLock = false;
						this.$ajax({
							url: this.$root.jifuUrl + "/addOutLecturer",
							data: this.qs.stringify(newDetail),
							method: 'POST',
							success: res => {
								if (res.data.code == 200) {
									this.$refs.alert.show({alertText: '保存成功',alertSubmit: function(){alertStatus: 0}});
									setTimeout(() =>{
										this.$router.push({
											name:'teacher'
										});
									},2000)
								}else{
									this.failText = res.data.message;
									this.$rootFunction().deleteResFail();
								}
							}
						});
					}
				}
			},
			editnews() {
				if(this.LabelsIds!=''){
					this.labels = this.LabelsIds.join(",")
				}else{
					this.labels = ''
				};
				let editDetail = {
					id:this.id,
					type:this.type,
					nickname:this.userName,
					phone:this.phone,
					headimg: this.imageUrl,
					sex: this.sex,
					proviceid:this.proviceid,
					cityid:this.cityid,
					regionid:this.regionid,
					gradeRuleId:this.gradeRuleId,
					labels:this.labels,
					content:this.msg,
					rootcompanyid:this.rootcompanyid
				};
				this.$ajax({
					url: this.$root.jifuUrl + '/updateLectureNew',
					data: this.qs.stringify(editDetail),
					method: 'POST',
					success: res => {
						if (res.data.code == 200) {
							this.$refs.alert.show({alertText: '保存成功',alertSubmit: function(){alertStatus: 0}});
							setTimeout(() =>{
								this.$router.push({
									name:'teacher'
								});
							},2000)
						}else{
							this.failText = res.data.message;
							this.$rootFunction().deleteResFail();
						}
					}
				});
			},
			checkSave() {
				if(this.nowType == 'add') {
					this.newAdd();
				}else if(this.nowType == 'edit') {
					this.editnews();
				}
			},
			cancel() {
				this.$router.go(-1);
			},
			handleAvatarSuccess(res) {
				if(res.code == 200) {
					this.imageUrl = res.data[0];
				};
			},
			beforeAvatarUpload(file) {
				const isJPG = (file.type === 'image/jpeg') || (file.type === 'image/png');
				const isLt2M = file.size / 1024 / 1024 < 2;
				if(!isLt2M) {
					this.$message.error('上传图片大小不能超过 2MB!');
				}
				return isJPG && isLt2M;
			}
		},
		components: {
			labelAll,
			alert
		},
		mounted() {
			this.getParams();
			this.$rootFunction().getTeacherLevelData();
			this.$rootFunction().getTeacherLevelStatus();
			this.$rootFunction().getAllCity();
			this.getOrganizationArr();
			this.getInnerLecture();
			if(this.nowType=="edit"){
				console.log('306',this.nowType,this.$root.teacherMsg);
				this.id = this.$root.teacherMsg.id;
				this.type = this.$root.teacherMsg.type;
				if(this.type==1){
					this.lectureType = '内部讲师';
				};
				if(this.type==2){
					this.lectureType = '外部讲师';
				};
				this.userName = this.$root.teacherMsg.nickname;
				this.phone = this.$root.teacherMsg.phone;
				this.imageUrl = this.$root.teacherMsg.headimg;
				this.sex = this.$root.teacherMsg.sex;
				this.proviceid = this.$root.teacherMsg.proviceid;
				this.cityid = this.$root.teacherMsg.cityid;
				this.regionid = this.$root.teacherMsg.regionid;
				if(this.proviceid!=undefined){ 
					this.city.push(this.proviceid);
				};
				if(this.cityid!=undefined){
					this.city.push(this.cityid);
				}; 
				if(this.regionid!=undefined){
					this.city.push(this.regionid);
				};
				this.gradeRuleId = this.$root.teacherMsg.grade_rule_id;
				this.msg = this.$root.teacherMsg.content;
				if(this.$root.teacherMsg.lecturerLabelname!=null){
					var arrnames=this.$root.teacherMsg.lecturerLabelname.split(",");
					this.LabelsNames=arrnames;
					var arrids=this.$root.teacherMsg.lecturerLabelid.split(",");
					this.LabelsIds=arrids;
				}
			}
		},
		watch: {
      		filterText(val) {
        		this.$refs.tree.filter(val);
        	}
      	}
	}
</script>

<style>
	.add_line{height: auto;margin-bottom: 20px;position: relative;overflow: hidden;}
	.add_line span{color: #333;}
	.add_line .tit{font-size: 16px;color: #333;width: 86px;text-align: right;display: inline-block;height: 33px;line-height:33px;float: left;}
	.add_line .el-input,.add_line .el-cascader{width: 200px;line-height: 33px;}
	.add_line .el-input input{width:100%;height: 33px;line-height: 33px;}
	.add_line .chooseInput input{border-radius: 5px 0 0 5px;}
	.add_line .warn{color:#f00;font-style: normal;font-size: 12px;}
	.add_line .warn i{margin-right: 5px;font-style: normal;}
	.add_line a{width: 80px;height: 33px;line-height: 33px;display: inline-block;color: #fff;margin-left: -5px;background: #44CEF6;text-align: center;font-size: 14px;border-radius: 0 5px 5px 0;box-sizing: border-box;cursor: pointer;}
	.add_line input::-webkit-input-placeholder{color: #666;}
	.add_line .el-cascader input{font-size: 14px;width: 100%;}
	.add_line .uploadHeadImg{position: absolute;top: 0;left: 87px;}
	.add_line .uploadHeadImg em{font-style: normal;font-size: 12px;color: #999;}
	.add_line .avatar-uploader,.add_line .avatar-uploader .el-upload .avatar{width: 100px;height: 100px;}
	.add_line .avatar-uploader .el-upload{width: 100px;height: 100px;border-radius: 6px;cursor: pointer;position: relative;overflow: hidden;}
	.add_line .avatar-uploader-icon{font-size: 28px;color: #8c939d;width: 100px;height: 100px;text-align: center;background: #f2f2f2;padding-top: 22px;}
	.add_line .avatar-uploader-icon b{color: #ccc;display: block;font-weight: normal;font-size: 14px;margin-top: 3px;}
	.add_line .avatar-uploader-icon em{font-style: normal;}
	.add_line .teacherSkills {position:relative;height:34px;line-height:34px;}
	.skillDetail {width:605px;height:32px;line-height:32px;border:1px solid #ccc;border-radius:5px;position:absolute;top:0;left:92px;}
	.skillDetail i {font-style:normal;color:#ccc;position:relative;top:-4px;margin-left:4px;cursor:pointer;}
	.skillDetail span,.skillContent span {color:#44CEF6;font-size:14px;width:auto!important;margin-left:15px;cursor:pointer;}
	.skillContent {margin-left:90px;height:auto!important;width:607px;line-height:28px}
	
	.innerLecture{width: 900px;height: 500px;background: #fff;border: 1px solid #ccc;position: fixed;top: 50%;left: 50%;margin-top: -250px;margin-left: -375px;z-index: 999;border-radius: 10px;padding: 20px;box-sizing: border-box;font-size: 14px;}
	.innerLecture .footerButton a{margin-top: 25px;margin-left: 220px;}
	.innerLecture .innerLectureClose{width: 15px;height: 15px;position: absolute;top: 20px;right: 20px;cursor: pointer;}
	.innerLectureLine{margin: 10px 0 20px;overflow: hidden;position: relative;}
	.innerLectureLine .el-cascader{position: absolute;top: -4px;right: 225px}
	.innerLectureLine .el-select,.innerLectureLine .el-input,.innerLectureLine input{height: 33px;line-height: 33px}
	.innerLectureLine .el-input__icon{line-height: 34px}
	.innerLectureLine .msearch{float: right;position: relative;}
	.innerLectureLine .msearch input{width: 200px;height: 33px;line-height: 33px;padding-left: 10px;border: 1px solid #DCDFE6;border-radius: 3px;font-size:12px;color: #666;box-sizing: border-box;}
	.innerLectureLine .msearch a{height: 33px;display: inline-block;position: absolute;top: 0;right: 0}
	.innerLecture .studyPag{margin-top: 15px;text-align: right;}
	.innerLecture .el-table .cell{font-size: 12px;color: #000}
	.innerLecture .el-tree-node__label{font-size: 12px;color: #333;}
	.innerLecture .leftContent{width: 23%;float: left;border: 1px solid #EBEEF5;height: 307px;overflow-x: hidden}
	.innerLecture .leftContent .el-input{width: 90%;display: block;margin: 10px auto}
	.innerLecture .leftContent .el-tree__empty-block{min-height: 40px;}
	.innerLecture .leftContent .el-tree__empty-block .el-tree__empty-text{font-size: 14px;}
	.innerLecture .rightContent{width: 75%;float: right;height: 307px;overflow-x: hidden;}
	.add_line .el-radio{height: 33px;line-height: 33px;}
	.add_line .labelFour{width: 400px;height: 33px;line-height: 33px;border: 1px solid #ccc;border-radius: 5px 0 0 5px;display: inline-block;box-sizing: border-box;float: left;}
	.add_line .labelFour span{position: relative;top: -2px;font-size: 14px;color: #333;margin-left: 16px;display: inline-block;}
	.add_line .openLabel{float: left;}
	.add_line .labelWarn{font-size: 12px;color: #999;margin-left: 87px;margin-top:10px}
</style>